<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>交易策略回测</span>
      </div>
    </template>
    
    <el-form :model="backtestSettings" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item>
            <template #label>
              <div style="display: flex; align-items: center; gap: 4px;">
                <span>交易对</span>
                <el-tooltip
                  content="选择要进行回测的加密货币交易对。不同交易对的市场特性和波动性差异较大，建议优先选择流动性较好的主流币对进行回测。"
                  placement="top"
                  effect="dark"
                >
                  <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-select v-model="backtestSettings.symbol" placeholder="选择交易对">
              <el-option
                v-for="item in symbols"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div style="font-size: 12px; color: #909399; margin-top: 2px;">建议选择BTC/USDT或ETH/USDT等主流币对</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              <div style="display: flex; align-items: center; gap: 4px;">
                <span>回测周期</span>
                <el-tooltip
                  content="选择回测的历史数据时间范围。7天适合短期策略测试，30天适合中期策略验证，90天适合长期策略分析，1年适合全面策略评估。"
                  placement="top"
                  effect="dark"
                >
                  <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-select v-model="backtestSettings.period" placeholder="选择周期">
              <el-option label="最近7天" value="7d"></el-option>
              <el-option label="最近30天" value="30d"></el-option>
              <el-option label="最近90天" value="90d"></el-option>
              <el-option label="最近1年" value="1y"></el-option>
            </el-select>
            <div style="font-size: 12px; color: #909399; margin-top: 2px;">推荐30天以获得平衡的测试结果</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              <div style="display: flex; align-items: center; gap: 4px;">
                <span>K线周期</span>
                <el-tooltip
                  content="K线数据的时间间隔。1分钟-15分钟适合高频交易策略，1小时-4小时适合中频策略，1天适合长期投资策略。周期越短，交易信号越频繁但噪音也越多。"
                  placement="top"
                  effect="dark"
                >
                  <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-select v-model="backtestSettings.interval" placeholder="选择K线周期">
              <el-option label="1分钟" value="1m"></el-option>
              <el-option label="5分钟" value="5m"></el-option>
              <el-option label="15分钟" value="15m"></el-option>
              <el-option label="1小时" value="1h"></el-option>
              <el-option label="4小时" value="4h"></el-option>
              <el-option label="1天" value="1d"></el-option>
            </el-select>
            <div style="font-size: 12px; color: #909399; margin-top: 2px;">推荐1小时或4小时周期进行策略测试</div>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item>
            <template #label>
              <div style="display: flex; align-items: center; gap: 4px;">
                <span>数据源</span>
                <el-tooltip
                  content="选择回测使用的数据来源。真实数据使用多个交易所的实际历史数据，准确性高但获取较慢；模拟数据快速生成，适合策略逻辑验证。"
                  placement="top"
                  effect="dark"
                >
                  <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-select v-model="backtestSettings.dataSource" placeholder="选择数据源">
              <el-option label="真实数据 (Binance + CryptoCompare + CoinGecko)" value="real"></el-option>
              <el-option label="模拟数据" value="mock"></el-option>
            </el-select>
            <div style="font-size: 12px; color: #909399; margin-top: 2px;">推荐使用真实数据获得更准确的回测结果</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              <div style="display: flex; align-items: center; gap: 4px;">
                <span>策略类型</span>
                <el-tooltip
                  content="选择交易策略算法。MA交叉：基于快慢均线交叉的经典策略；RSI：基于相对强弱指数的超买超卖策略；布林带：基于价格波动区间的策略；自定义：支持编写自定义策略代码。"
                  placement="top"
                  effect="dark"
                >
                  <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-select v-model="backtestSettings.strategyType" placeholder="选择策略类型">
              <el-option label="移动平均线交叉" value="ma_cross"></el-option>
              <el-option label="RSI策略" value="rsi"></el-option>
              <el-option label="布林带策略" value="bollinger"></el-option>
              <el-option label="VWAP策略" value="vwap"></el-option>
              <el-option label="自定义策略" value="custom"></el-option>
              <el-option label="🤖 AI智能策略1" value="ml_strategy1"></el-option>
            </el-select>
            <div style="font-size: 12px; color: #909399; margin-top: 2px;">初学者推荐使用MA交叉策略，高级用户可试用AI智能策略</div>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item>
            <template #label>
              <div style="display: flex; align-items: center; gap: 4px;">
                <span>初始资金</span>
                <el-tooltip
                  content="回测开始时的虚拟资金总额，单位为USDT。这个金额决定了策略的资金规模，建议设置为真实交易时可能使用的资金量以获得准确的回测结果。"
                  placement="top"
                  effect="dark"
                >
                  <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-input-number v-model="backtestSettings.initialCapital" :min="100" :step="100" :max="1000000" style="width: 100%;"></el-input-number>
            <div style="font-size: 12px; color: #909399; margin-top: 2px;">建议设置10,000-50,000 USDT进行测试</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              <div style="display: flex; align-items: center; gap: 4px;">
                <span>每笔交易资金</span>
                <el-tooltip
                  content="每次交易使用的资金占总资金的百分比。例如设置20%，则每次买入时使用20%的可用资金。较低的比例风险较小但收益有限，较高的比例收益潜力大但风险也高。"
                  placement="top"
                  effect="dark"
                >
                  <el-icon size="14" color="#909399"><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-input-number v-model="backtestSettings.tradeAmount" :min="1" :step="1" :max="100" style="width: 100%;"></el-input-number>
            <div style="font-size: 12px; color: #909399; margin-top: 2px;">推荐设置20-50%，根据风险偏好调整</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import { QuestionFilled } from '@element-plus/icons-vue'

export default {
  name: 'BacktestSettings',
  components: {
    QuestionFilled
  },
  props: {
    backtestSettings: {
      type: Object,
      required: true
    },
    symbols: {
      type: Array,
      required: true
    },
    isBacktesting: {
      type: Boolean,
      required: true
    },
    isVirtualTrading: {
      type: Boolean,
      required: true
    },
    virtualTradingInterval: {
      type: [Number, Boolean],
      required: true
    },
    backtestResults: {
      type: Object,
      required: true
    }
  },
  emits: ['run-backtest', 'start-virtual-trading', 'save-strategy', 'load-strategy', 'update:backtestSettings'],
  setup(props, { emit }) {
    const runBacktest = () => {
      emit('run-backtest')
    }

    const startVirtualTrading = () => {
      emit('start-virtual-trading')
    }

    const saveStrategy = () => {
      emit('save-strategy')
    }

    const loadStrategy = () => {
      emit('load-strategy')
    }

    return {
      runBacktest,
      startVirtualTrading,
      saveStrategy,
      loadStrategy
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>